﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>在线考试系统登录页面</title>
    <script src="Scripts/jquery-3.3.1.js"></script>
    <!--<script src="layui/layui.all.js"></script>-->
    <script src="myjs/GenerateVerificationCode.js"></script>
    <script src="layui/layui.js"></script>
    <link href="layui/css/layui.css" rel="stylesheet" />
    <link href="mycss/login.css" rel="stylesheet" />
    
    <script>
        $(function ()
        {
            $("#password_img").click(function ()
            {
                var img = $("#password_img");
                var a = 'layui/images/icon/show_password.svg';
                var password = $("#password");
                if (password.attr("type") == "password")
                {
                    password.attr("type", "text");
                    img.attr("src", "./layui/images/icon/show_password.svg");
                } else
                {
                    password.attr("type", "password");
                    img.attr('src', 'layui/images/icon/hide_password.svg');

                }

            });


        });
        
    </script>

    
</head>
<body>
    <div class="main-body">
        <div class="login-main">
            <!--头部-->
            <div class="login-top">
                <span>在线考试系统</span>
            </div>
        </div>
        <form class="layui-form" >
            <div class="layui-form" style="width: 80%; margin: 0 auto;">
                <!--主干部分 -->
                <div class="layui-form-item" style="margin: 20px auto;">
                    <div class="inputdiv">
                        <i class="layui-icon layui-icon-username"></i>
                        <input type="text" id="username" name="username" required lay-verify="required" autocomplete="off" placeholder="用户名" class="layui-input" style="text-align: center;" />
                    </div>

                    <div class="inputdiv">
                        <i class="layui-icon layui-icon-password"></i>
                        <input type="password" id="password" name="password" required  lay-verify="required" autocomplete="off" placeholder="密码" class="layui-input" style="text-align: center;" />
                        <img id="password_img" src="./layui/images/icon/hide_password.svg" style="width: 16px;" />
                    </div>

                    <div class="inputVerify">
                        <div class="inputdiv" style="display: block; width: 150px; float: left; margin-top: 30px;">
                            <input type="text" id="verifycode" name="verifcode" required lay-verify="required" autocomplete="off" placeholder="验证码" class="layui-input" style="text-align: center; display: inline-block;" />
                        </div>
                        <div>
                            <canvas id="canvas" style="display: inline-block; float: right; width: 120px; height: 60%;  margin: 18px 10px;"></canvas>
                        </div>
                    </div>

                </div>
                <div class="tips">
                    <div class="layui-form">
                        <input type="checkbox" name="" title="记住密码" lay-skin="primary" checked />
                        <a  href="./forgetPwd" style="display: inline-block; width: 80px; height: 100%; float: right;">忘记密码？</a>
                    </div>
                </div>
                <div >
                    <button type="button" id="loginBtn" lay-submit lay-filter="submitBtn" class="layui-btn layui-btn-radius login-btn" >登 录</button>
                </div>
            </div>
        </form>
        <input type="text" id="test0" name="test0" style="display:none;" />
        <div class="footer"></div>

    </div>


    <script>
        layui.use(['form', 'layer', 'jquery'], function ()
        {
            var form = layui.form;
            var $ = layui.$;
            //监听提交按钮
            form.on('submit(submitBtn)', function (data)
            {
                //判断验证码
                if ($("#test0").val().toString().trim() != $("#verifycode").val().toString().trim().toLowerCase())
                {
                    layer.alert("验证码错误", { icon: 2 });
                    $("#verifycode").val("");
                    $("#verifycode").focus();
                    $("#canvas").click();
                    return 0;
                }
                var i = 0;
                $.ajax({
                    url: './login.aspx',
                    datatype: 'text',
                    data: data.field,
                    beforeSend:function(){
                        i = showLoad();
                    },
                    success: function (res)
                    {
                        closeLoad(i);
                        //根据返回值不同，跳转至不同页面
                        if (res == '1')
                        {
                            window.location.replace("./admin/adminIndex.html");
                        }
                        else if (res == '2')
                        {
                            window.location.replace("./teacher/teacherIndex.html");
                        }
                        else if (res == '3')
                        {
                            window.location.replace("./student/studentIndex.html");
                        }
                        else
                        {
                            layer.alert("账号或密码错误", { icon: 2 });
                        }
                    },
                    error: function (xhr, textStatus, errorThrown)
                    {
                        /*错误信息处理*/
                        alert("状态码：" + xhr.status + "状态:" + xhr.readyState + "错误信息:" + xhr.statusText + "请求状态：" + textStatus + errorThrown);
                        //当前状态,0-未初始化，1-正在载入，2-已经载入，3-数据进行交互，4-完成。
                        alert("返回响应信息：" + xhr.responseText);//这里是详细的信息
                    }
                });
                return false;  //防止表单提交两次
            });
            // 上传等待
            function showLoad()
            {
                return layer.msg('拼命执行中...', { icon: 16, shade: [0.5, '#f5f5f5'], scrollbar: false, offset: 'auto', time: 100000 });
            }
            // 关闭
            function closeLoad(index)
            {
                layer.close(index);
            }
            $("#username").change(function ()
            {
                var len = $("#username").val().length;
                if (!(len == 6 || len == 10 || len == 13))
                {
                    layer.tips("账号长度不对", "#username", { icon: 4 });

                }
                var r = /^[0-9]+$/g;
                if (!r.test($("#username").val()))
                {
                    layer.tips("只能为数字", "#username", { icon: 4 });
                    return;
                }
            });
            $("#password").change(function ()
            {
                var len = $("#password").val().length;

                var r = /^[a-zA-Z]\w{5,19}$/;
                if (!r.test($("#password").val()))
                {
                    layer.tips("密码过于简单或者长度不对", "#password", { icon: 4 });
                    return;
                }
            });
            //要删除的代码
            $("#username").val("1111111111");
            $("#password").val('a123456');

        });
    </script>
    
</body>
</html>
